<template>
    <div id="baoyou">
      <down-tip></down-tip>
      <header-bar :title="title"></header-bar>
      <sticky v-show="false"  top="0px" z-ndex="100000">
        <div class="scroller ">
          <scroller  lock-y :scrollbar-x="false" :bounce="false">
            <top-nav @nav-item-click="navItemclick" :navList="navList" :itemWidth="itemWidth"></top-nav>
          </scroller>
        </div>
      </sticky>
      <div class="nav-shop vux-1px-b">
        <div @click="togo(item.rank)" v-for="(item,index) in navShopList" class="nav-shop-item vux-1px-l">
          <p class="name" :style="{color:item.textColor}">{{item.name}}</p>
          <p class="desc">{{item.desc}}</p>
          <div class="img">
            <img v-src="item.pic" alt="">
          </div>
        </div>
      </div>
      <list-item :couponListData="couponListData" @toTaobao="toTaobao"></list-item>

      <show-bottom :showBottom="showBottom"></show-bottom>

      <tab-bar :activeIndex="activeIndex" ></tab-bar>
    </div>
</template>
<script>
  import TabBar from 'src/components/common/TabBar.vue'
  import HeaderBar from 'src/components/common/headerBar.vue'
  import TopNav from 'src/components/common/TopNav.vue'
  import DownTip from 'src/components/common/downTip'
  import ListItem from 'src/components/common/jiukuaijiuList'
  import ShowBottom from 'src/components/common/bottomShow'
  import {Scroller} from 'vux'
  import Sticky from 'vue-sticky-position';
  import {URI_GETTYPE,RUI_GETTYPECOUPON,URI_SHZRANKINGS} from 'src/const/uri'
  import MDUtils from 'src/assets/js/md-utils'
  export default{
    components:{TabBar,Scroller,Sticky,HeaderBar,TopNav,DownTip,ListItem,ShowBottom},
    data(){
      return{
        title:'今日疯抢榜',
        activeIndex:3,//底部导航active
        navList:[],
        navShopList:[{name:'实时销量榜',textColor:'#e23357', desc:'超值好货', pic:'/static/img/9.9/9.9.png',rank:'real'},
          {name:'周榜',textColor:'#a2dd7a', desc:'优质行货', pic:'/static/img/9.9/19.9.png',rank:'week'},
          {name:'推广榜',textColor:'#ee931c', desc:'品质良选', pic:'/static/img/9.9/29.9.png',rank:'spread'}
          ],
        currentIndex:0,
        itemWidth:80,
        reqPage:1,
        reqPageSize:10,
        goodCatId:0, //0 指的是全部
        couponListData:[],
        sw:true,//控制开关
        isWx:MDUtils.isWx(),
        showBottom:false,
        /**/
        rank:'real'
      }
    },
    created(){
    //  this.getList();
     // this.initData();
      this.getshzrankings();
    },
    mounted(){
      let spinner=document.getElementsByClassName('spinner')[0];
      spinner.style.display='none';
      let baoyou= document.getElementById('baoyou');// 文档高度
      window.addEventListener('scroll',()=>{
        // 判断是否滚动到底部
        let scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
        if(scrollTop + document.documentElement.clientHeight >= baoyou.offsetHeight-200) {
          if(this.sw==true){
            this.reqPage+=1;
            this.sw = false;
            this.getshzrankings();
          }
        }
        if(scrollTop>100){
          this.showBottom=true;
        }else{
          this.showBottom=false;
        }
      })
    },
    methods:{
      getshzrankings(){
        this.$ajax.get(URI_SHZRANKINGS,{
         rank:this.rank,
          promotionTypeId:6
        },(res)=>{
          console.log(res);
          this.couponListData=this.couponListData.concat(res.data.data);
          this.sw = true;
          if (res.data.data.length < 10) {
            //说明没数据了
            this.sw=false;
          };
        });
      },
      getList(){
        this.$ajax.get(URI_GETTYPE,{},(res)=>{
          this.navList=res.data;
          // console.log('navList');
          //console.log(this.navList);
        });
      },
      initData(){
        this.$ajax.get(RUI_GETTYPECOUPON,{
          reqPage:this.reqPage,
          reqPageSize:this.reqPageSize,
          goodCatId:this.goodCatId,//商品分类Id （0 代表全部）
          promotionTypeId:6,
          type:1 //表示九块九包邮
        },(res)=>{
          //console.log(res);
          this.couponListData=this.couponListData.concat(res.data.data);
          this.sw = true;
          if (res.data.data.length < 10) {
            //说明没数据了
            this.sw=false;
          };
        });
      },

      navItemclick(val){
        //console.log(val);
        this.goodCatId=val;
        this.couponListData=[];
        this.initData();
      },
      // togo(index){
      //   if(index==0){
      //     let Url = document.URL.replace(/baoyou/g, "9.9youpin").split('?')[0];
      //     window.location.href=Url;
      //   }else if(index==1){
      //     let Url = document.URL.replace(/baoyou/g, "19.9jingpin").split('?')[0];
      //     window.location.href=Url;
      //   }else if(index==2){
      //     let Url = document.URL.replace(/baoyou/g, "29.9liangpin").split('?')[0];
      //     window.location.href=Url;
      //   }
      // },
      togo(rank){
        console.log(rank);
        this.rank=rank;
        this.couponListData=[];
        this.getshzrankings();
      },
      toTaobao(item){
        if(this.isWx){
          item=encodeURIComponent(item);
          let beforeUrl = document.URL.replace(/baoyou/g, "isWxOpen").split('?')[0];
          let toUrl=`${beforeUrl}?link=${item}`;
          window.location.href=toUrl;
        }else{
          window.location.href=item
        }
      }
    }

  }
</script>
<style lang="less" scoped>
 @import "baoyou";
 .scroller{
   background: rgba(0,0,0,.8);
   color:#fff;
 }
</style>
